<template>
  <div class="footer_main">
    <div class="footer_content">
      <ul>
        <li class="content-border">
          <div class="footer-email">
            <img :src="{{configInfo.authorQqPhoto}}}" />
            <p>扫码关注我吧</p>
          </div>
        </li>

        <li class="content-border">
          <h2>最新博客</h2>
          <div class="footer-message">
            <ul>
              <li v-for="item in newList" :key="item.articleId">
                <router-link
                  :to="{
                    path: '/articleDetail',
                    query: { articleId: item.articleId },
                  }"
                  >{{ item.articleTitle }}</router-link
                >
              </li>
            </ul>
          </div>
        </li>
        <li class="content-border">
          <h2>联系我</h2>
          <div class="footer-message">
            <ul>
              <li>
                {{ configInfo.authorEmail }}
              </li>
              <li>
                {{ configInfo.authorQq }}
              </li>
            </ul>
          </div>
        </li>
        <li>
          <h2>本站信息</h2>
          <div class="footer-message">
            <ul>
              <li>
                文章总数：<span class="footer-font-color">{{ totalNum }}</span
                >篇
              </li>
              <li>
                访问总数：<span class="footer-font-color">{{ configInfo.configViews }}</span
                >次
              </li>
              <li>
                评论总数：<span class="footer-font-color">{{ commentNum }}</span
                >条
              </li>
              <li>
                留言总数：<span class="footer-font-color">{{ messageNum }}</span
                >条
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <p
      class="footer-text-thin"
      style="text-align:center;"
    >
      © 2020 - 2021 Gyy @Code | {{configInfo.recordNum}}
    </p>
    <p id="momk" style="color: #ff0000;text-align:center;"></p>
  </div>
</template>
<script>
import "@/assets/css/footer.css";
import { getConfigInfoList } from "@/api/footer";
import { formatDate } from "@/utils/date";

export default {
  name: "footer",
  data() {
    return {
      configInfo: "",
      newList: [],
      commentNum: 0,
      messageNum: 0,
      viewsNum: 0,
      totalNum: 0,
    };
  },
  created() {
    this.getConfigInfoListFun();
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
  
    getConfigInfoListFun() {
      getConfigInfoList().then((response) => {
        this.newList = response.data.newList;
        this.configInfo = response.data.configInfo;
        this.messageNum = response.data.messageNum;
        this.totalNum = response.data.totalNum;
        this.commentNum = response.data.commentNum;
     });
    },
  },
  mounted(){
      var str = "2022-8-25";
      str = str.split("-");
      var date = new Date();
      date.setUTCFullYear(str[0], str[1] - 1, str[2]);
      date.setUTCHours(0, 0, 0, 0);
      var birthDay = date;
      var today = new Date();
      var timeold = today.getTime() - birthDay.getTime();
      var sectimeold = timeold / 1000;
      var secondsold = Math.floor(sectimeold);
      var msPerDay = 24 * 60 * 60 * 1000;
      var e_daysold = timeold / msPerDay;
      var daysold = Math.floor(e_daysold);
      var e_hrsold = (daysold - e_daysold) * -24;
      var hrsold = Math.floor(e_hrsold);
      var e_minsold = (hrsold - e_hrsold) * -60;
      var minsold = Math.floor((hrsold - e_hrsold) * -60);
      var seconds = Math.floor((minsold - e_minsold) * -60).toString();
      document.getElementById("momk").innerHTML =
        "本站已安全营业" +
        daysold +
        "天" +
        hrsold +
        "小时" +
        minsold +
        "分" +
        seconds +
        "秒";
      setTimeout(momxc, 1000);
    
  }
};
</script>

<style>
#momk {
  animation: change 10s infinite;
  font-weight: 800;
}

@keyframes change {
  0% {
    color: #5cb85c;
  }
  25% {
    color: #556bd8;
  }
  50% {
    color: #e40707;
  }
  75% {
    color: #66e616;
  }
  100% {
    color: #67bd31;
  }
}
</style>
